<!-- 主页面边栏菜单 -->
<template>
    <!--el-menu 是菜单容器-->
    <el-menu :default-active="menuIndex" @select="handleSelect" background-color="#545c64" active-text-color="#ffd04b"
        text-color="#fafafa" class="menu" router>
        <!--el-menu-item 是菜单的项-->
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <Calendar />
                </el-icon>
                <span>西游记</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/HomePage/Textarea">
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>孙悟空</template>
                </el-menu-item>
                <el-menu-item index="/HomePage/Echarts">
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>猪八戒</template>
                </el-menu-item>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>沙和尚</template>
                </el-menu-item>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>唐僧</template>
                </el-menu-item>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>白龙马</template>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <!--el-sub-menu 是内嵌子菜单-->
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <Calendar />
                </el-icon>
                <!--菜单2 需要用 元素包起来，否则折叠的时候折叠不起来-->
                <span>红楼梦</span>
            </template>
            <!--el-menu-item-group 用来放 子菜单的项-->
            <el-menu-item-group>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>林黛玉</template>
                </el-menu-item>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>薛宝钗</template>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
            <template #title>
                <el-icon>
                    <Calendar />
                </el-icon>
                <span>水浒传</span>
            </template>
            <el-menu-item-group>
                <el-menu-item>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <template #title>林冲</template>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="/HomePage/MainImages">
            <el-icon>
                <Calendar />
            </el-icon>
            <template #title>
                三国演义
            </template>
        </el-menu-item>
    </el-menu>
</template>
<script setup>
import { ref } from 'vue';
import router from '../../router';
const menuIndex = '/HomePage/Textarea';
// router.push('/HomePage/Textarea');
router.push(`${menuIndex}`);
const handleSelect = (index) => {
    // console.log(index);
}

</script>

<style scoped>
.menu {
    width: 140px;
    height: 100%;
}
</style>